<template>
  <el-container class="layout-container">
    <el-header class="el-header">
      <el-dropdown>
        <span class="el-dropdown__box">
          <div>
            <strong>当前用户：</strong>{{ loginUser.nickName }}
          </div>
          <el-icon>
            <ArrowDownBold />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="SwitchButton" @click="logoutFun">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-main class="layout-bottom-box">
      <div class="left">
        <el-aside width="200px" class="el-aside">
          <el-menu class="el-menu" router :default-active="defaultActive">
            <el-menu-item index="/oj/layout/cuser">
              <el-icon>
                <Management />
              </el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/oj/layout/question">
              <el-icon>
                <Management />
              </el-icon>
              <span>题目管理</span>
            </el-menu-item>
            <el-menu-item index="/oj/layout/exam">
              <el-icon>
                <Management />
              </el-icon>
              <span>竞赛管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <div class="right">
        <RouterView />
      </div>
    </el-main>

  </el-container>
</template>

<script setup>
  import { getUserInfoService, logoutService } from '@/api/suser';
  import router from '@/router';
  import { removeToken } from '@/utils/cookie';
  import {
    Management,
    ArrowDownBold,
    Lock,
    SwitchButton
    } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'; 
  import { reactive, ref, onMounted  } from 'vue';
  import { useRoute } from 'vue-router'

  const route = useRoute();
  const defaultActive = ref(route.path);  

  onMounted(() => {
    // 组件挂载时，确保 defaultActive 是当前路由路径
    console.log(route.path)
    defaultActive.value = route.path;
  })


  const loginUser = reactive({
    nickName: ''
  })

  const getUserInfo = async () => {
    const userInfo = await getUserInfoService()
    loginUser.nickName = userInfo.data.nickName 
  }

  const logoutFun = async () => {
    //弹框
    await ElMessageBox.confirm(
      '确定要退出登录吗?',
      '温馨提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    //用户点击确认后的后续逻辑
    await logoutService()
    removeToken()
    ElMessage.success('退出成功')
    router.push('/oj/login')
  }

  getUserInfo()

</script>

<style lang="scss" scoped>
    .layout-container {
    height: 100vh;
    background: #f7f7f7;

    .layout-bottom-box {
        display: flex;
        justify-content: space-between;
        height: calc(100vh - 100px);
        overflow: hidden;

        .left {
        margin-right: 20px;
        background: #fff;
        display: flex;

        :deep(.el-menu) {
            flex: 1;

            .el-menu-item.is-active {
            color: #32c5ff;
            }

            .el-menu-item:hover {
            background: #fff;
            color: #32c5ff;
            }
        }
        }

        .right {
        flex: 1;
        overflow-y: auto;
        background: #fff;
        padding: 20px;
        }
    }

    .el-aside {
        background-color: #fff;

        &__logo {
        height: 120px;
        // background: url('@/assets/logo.png') no-repeat center / 120px auto;
        }

        .el-menu {
        border-right: none;
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 40px;

        .el-dropdown__box {
        display: flex;
        align-items: center;

        .el-icon {
            color: #4c4141;
            margin-left: 20px;
        }

        &:active,
        &:focus {
            outline: none;
        }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
    }
</style>